<template>
  <div id="reward_detail">
    <c-title :hide="false" :text="'奖励统计'" tolink="IntegralGetRecord"> </c-title>
    <div id="content_box">
      <div class="box">
        <ul class="data_line">
          <li class="data_a" v-for="(item, index) in info" :key="index">
            <div class="flexBox">
              <div class="flexBox_t">
                <span>{{ $i18n.t("money") }}</span
                >{{ item.sum }}
              </div>
              <div class="flexBox_b">{{ item.name }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="center" v-if="info_two && info_two.length > 0">
        <ul>
          <li v-for="(item, index) in info_two" :key="index">
            {{ item.name }}：<span>{{ $i18n.t("money") }}{{ item.sum }}</span>
          </li>
        </ul>
      </div>
      <div class="tips" v-if="description && description.length > 0">
        <ul>
          <li v-for="item in description" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import reward_detail_controller from "./reward_detail_controller";

export default reward_detail_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#reward_detail {
  background-color: #fff;

  #content_box {
    .box {
      .data_line {
        display: flex;
        flex-wrap: wrap;
        border-bottom: solid 0.0625rem #ebebeb;
        .data_a {
          width: 50%;
          flex-shrink: 0;
          border-bottom: solid 0.0625rem #ebebeb;

          .flexBox {
            padding: 0.625rem 0.875rem;
            text-align: left;

            div:first-child {
              height: 1.625rem;
              line-height: 1.625rem;
              font-size: 20px;
              font-weight: bold;
              color: #f15353;

              span {
                font-size: 14px;
              }
            }

            div:last-child {
              line-height: 1.5rem;
              font-size: 14px;
              color: #8c8c8c;
            }
          }
        }
        .data_a:nth-child(1n) {
          border-right: solid 0.0625rem #ebebeb;
        }
        .data_a:nth-last-child(-n + 1) {
          border-bottom: 0;
        }
      }
    }

    .center {
      padding: 0.625rem 0;

      ul {
        padding: 0 0.875rem;

        li {
          line-height: 1.875rem;
          font-size: 16px;
          text-align: left;

          span {
            color: #f15353;
          }
        }
      }
    }

    .tips {
      background-color: #fafafa;
      padding: 0.625rem 0;

      ul {
        li {
          padding: 0 0.875rem;
          text-align: left;
          font-size: 15px;
          color: #8c8c8c;
        }

        li::before {
          margin-right: 0.25rem;
          color: #f15353;
          content: "*";
        }
      }
    }
  }
}
</style>
